<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>照片墙示例</title>
    <style>
        /* 让页面与照片墙占满视口 */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #333; /* 照片墙背景色，可自行修改 */
        }

        /* 照片墙容器，使用无序列表 */
        ul.photo-wall {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            position: relative; /* 让子元素以此为参考定位 */
        }

        /* 每个照片项的基本样式 */
        ul.photo-wall li {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;    /* 初始宽度 */
            height: 150px;   /* 初始高度 */
            margin-top: -75px;   /* 让照片中心对齐 */
            margin-left: -100px; /* 让照片中心对齐 */
            box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 盒子阴影 */
            transition: all 0.4s ease;           /* 过渡动画 */
            z-index: 1;                         /* 初始层级 */
            cursor: pointer;                    /* 鼠标悬停样式 */
            /* 可以统一设置一个随机/固定的旋转和模糊 */
            transform: rotate(15deg);
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }

        /* 照片内部的 img 填充整个 li */
        ul.photo-wall li img {
            width: 100%;
            height: 100%;
            object-fit: cover;  /* 等比例裁剪，防止变形 */
            display: block;
        }

        /* 鼠标悬停时的放大、去旋转、去模糊效果 */
        ul.photo-wall li:hover {
            width: 300px;       /* 放大 */
            height: 225px;
            margin-top: -112.5px;
            margin-left: -150px;
            transform: rotate(0deg);
            -webkit-filter: none;
            filter: none;
            box-shadow: 0 0 15px rgba(0,0,0,0.8);
            z-index: 999;       /* 提升到最前 */
        }

        /* 为了演示，这里针对每张照片设置不同的初始偏移、旋转和模糊。
           也可以写成行内 style 或者用 nth-child。 */
        /* 第一张照片 */
        ul.photo-wall li:nth-child(1) {
            margin-top: -180px;  /* 初始位置稍微上移 */
            margin-left: -220px;
            transform: rotate(-10deg);
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }
        /* 第二张照片 */
        ul.photo-wall li:nth-child(2) {
            margin-top: -10px;
            margin-left: -130px;
            transform: rotate(25deg);
            -webkit-filter: blur(2px);
            filter: blur(2px);
        }
        /* 第三张照片 */
        ul.photo-wall li:nth-child(3) {
            margin-top: -90px;
            margin-left: 10px;
            transform: rotate(10deg);
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }
        /* 你可以继续添加更多照片的样式 */
    </style>
</head>
<body>
<ul class="photo-wall">
    <li>
        <img src="ballon.png" alt="photo1">
    </li>
    <li>
        <img src="car.png" alt="photo2">
    </li>
    <li>
        <img src="read.png" alt="photo3">
    </li>
    <li>
        <img src="ballon.png" alt="photo1">
    </li>
    <li>
        <img src="car.png" alt="photo2">
    </li>
    <li>
        <img src="read.png" alt="photo3">
    </li>
    <!-- 你可以继续添加更多的 <li> ... -->
</ul>
</body>
</html>
